<template>
  <page-wrap ref="pageWrap" hideTab back title="一览通" navLeft :showTop="false" :dark="loaded? false: true" hideSafeArea>
    <!-- 未开通 -->
    <template v-if="vipLevel==0">
      <template v-for="(item, index) in versionInfo">
        <view v-show="choseType == item.versionLevel" class="vip" :class="'vip-'+item.versionLevel" :key="index">
          <view class="top">
            <image class="img-w top-img" mode="widthFix" :src="vipCard(item.versionLevel)"></image>
            <!-- <image :src="circleImg" mode="widthFix" class="circle"></image> -->
            <!-- <image class="icon icon-title" :src="item.versionNameImg"></image>
            <view class="label">开通{{item.versionName}}，享受更多专属权益</view>
            <image class="vip-icon" :src="vipIcon(item.versionLevel)"></image>
            <view class="gradient"></view> -->
          </view>
          <scroll-view scroll-y class="scroll-view">
            <view class="price" v-if="item.levelImg && item.levelImg.length">
              <template v-for="(levelItem, index) in item.levelImg">
                <image class="img-price" mode="widthFix" :src="levelItem.img" :key="index"
                  @click="handleLevelClick(levelItem.level)"></image>
              </template>
            </view>
            <view class="box" v-if="item.priceDetailImg" style="margin-top: 28rpx;">
              <image class="img-w" mode="widthFix" :src="item.priceDetailImg"></image>
            </view>
            <view class="box" v-for="(subItem, subIndex) in item.rightsData" :key="subIndex">
              <image class="img-w" mode="widthFix" :src="subItem.rightsImg"></image>
            </view>
          </scroll-view>
          <view class="buy">
            <view class="container">
              <view class="noPayButtons">
                <image class="img-code" mode="widthFix" :src="item.codeImg" @click="showModal=true"></image>
                <image class="img-open" mode="widthFix" :src="item.openImg" @click="handleBuyVip(item.versionLevel)">
                </image>
              </view>
            </view>
          </view>
        </view>
      </template>
    </template>

    <!-- 已开通 -->
    <view v-if="vipLevel != 0" class="vip-detail" :class="'vip-'+(currentVipLevel)">
      <view class="top">
        <swiper :current="current" previous-margin="66rpx" next-margin="66rpx" @change="change" class="swiper">
          <swiper-item v-for="(item,index) in versionInfo" :key="index" class="swiper-item">
            <view class="card-wrap"
              :class="['card-'+ item.versionLevel, {'not-current': item.versionLevel != vipLevel}]">
              <view class="box">
                <image :src="circleImg" mode="widthFix" class="circle"></image>
                <text v-if="item.versionLevel == vipLevel" class="icon icon-current"></text>
                <image v-if="item.versionLevel != vipLevel" class="icon icon-title" :src="item.versionNameImg"></image>
                <view v-if="item.versionLevel == vipLevel" class="user-info">
                  <view class="avatar-wrap">
                    <image :src="personInfo.headImg" class="avatar" mode="widthFix"></image>
                  </view>
                  <view class="user-info-right">
                    <image class="icon icon-title" :src="item.versionNameImg"></image>
                    <view class="user-name">{{personInfo.iname}}</view>
                  </view>
                </view>
                <view v-if="item.versionLevel == vipLevel" class="label">
                  <template v-if="vipLevel > 1"> {{item.stopTime}}到期</template>
                </view>
                <view v-else-if="item.versionLevel < vipLevel" class="label"> 您的当前等级高于该等级</view>
                <view v-else class="label">开通{{item.versionName}}，享受更多专属权益</view>
                <text v-if="item.versionLevel >= vipLevel" class="icon icon-action"
                  @click="handleBuyClick(item)"></text>
              </view>
              <text class="icon icon-diamonds"></text>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <template v-for="(item, index) in versionInfo">
        <scroll-view v-show="versionInfo[current].versionLevel == (item.versionLevel)" scroll-y class="scroll-view"
          :key="index">
          <view class="space"></view>
          <view v-if="item.versionLevel >= vipLevel" class="buy" @click="handleBuyClick(item)">
            <image class="img-w" :src="item.submitImg" mode="widthFix"></image>
          </view>
          <view class="box" v-for="(subItem, subIndex) in item.rightsData" :key="subIndex"
            @click="handleItemClick(subItem)">
            <image class="img-w" mode="widthFix" :src="subItem.rightsImg"></image>
          </view>
        </scroll-view>
      </template>

    </view>
    <view>
      <u-modal v-model="showModal" @confirm="confirm" @cancel="handleModalCancel" title="激活码开通" show ref="uModal"
        show-cancel-button :async-close="true">
        <view class="slot-content">
          <u-form :model="modalForm" ref="modalForm">
            <u-form-item label="激活码：" prop="activateCode" label-width='120rpx'>
              <u-input v-model="modalForm.activateCode" :clearable="false" :maxlength="18" placeholder="请输入激活码"
                placeholderStyle="font-size:28rpx" size="small" :custom-style="{fontSize:'28rpx'}" />
            </u-form-item>
          </u-form>
        </view>
      </u-modal>
    </view>
    <view>
      <u-popup
        v-model="showConsultant"
        mode="bottom"
        closeable
        border-radius="24"
      >
        <view class="consultant">
          <view class="consultant-title">您的专属顾问：</view>
          <view class="consultant-name">{{ consultantName }}（{{ consultantPhone }}）</view>
          <view class="btn-call" @click="handleCall"></view>
        </view>
      </u-popup>
    </view>
  </page-wrap>
</template>

<script>
import { getPersonAllRights, openYltByInviteCode } from "@/api/modules/vip";
import { addOrderAndPay, getCustomerService } from "@/api/modules/company";
import ShareMixin from "@/mixins/share";

export default {
  mixins: [ShareMixin],
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      topHeight: getApp().globalData.topHeight,
      choseType: 4,
      vipLevel: 0,
      currentVipLevel: 0,
      personInfo: {},
      circleImg: this.$imgBaseSelf + "vip/circle.png",
      current: 0,
      animationData: {},
      animationData2: {},
      versionInfo: [],
      paying: false,
      provider: "",
      loaded: false,
      jumpLevel: "",
      shareTitle: "一览通，企业成长顾问",
      sharePath: "/pagesSub/companyCenter/vip/index",
      modalForm: {},
      showModal: false,
      showConsultant: false,
      consultantPhone: '400-884-1001',
      consultantName: '客服',
    };
  },
  created() {
    uni.getProvider({
      service: "payment",
      success: (res) => {
        this.provider = res.provider;
      },
    });
  },
  watch: {
    current(newVal) {
      this.currentVipLevel = this.versionInfo[newVal].versionLevel;
    },
  },
  mounted() {
    this.getData();
    this.getCustomerService();
  },
  onLoad(opt) {
    opt && opt.jumpLevel && (this.jumpLevel = opt.jumpLevel);
  },
  methods: {
    handleModalCancel() {
      this.modalForm.activateCode = "";
    },
    confirm() {
      const params = {
        personId: this.personId,
        companyId: this.personId,
        rightsType: "public",
        tradeVersionRightsId: 123,
        inviteCode: this.modalForm.activateCode,
      };
      openYltByInviteCode(params)
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({ title: "激活成功" });
            setTimeout(() => {
              uni.redirectTo({ url: "/pagesSub/companyCenter/vip/index" });
            }, 300);
          } else {
            uni.showToast({
              title: "激活码错误或已失效，请联系主账号管理员",
              icon: "error",
            });
          }
        })
        .catch((e) => {
          uni.showToast({ title: "服务器开小差啦", icon: "error" });
          console.log(e);
        })
        .finally(() => {
          setTimeout(() => {
            this.showModal = false;
          }, 300);
        });
    },
    getData() {
      const params = {
        // personId: 0,
        personId: this.personId || 0,
        versionType: "ylt",
      };
      uni.showLoading();
      getPersonAllRights(params)
        .then((res) => {
          if (res.code == 200) {
            this.current = 0;
            this.personInfo = res.data.personInfo;
            this.vipLevel = res.data.personInfo.yltLevel;
            this.versionInfo = res.data.versionInfo;

            for (let i = 0; i < this.versionInfo.length; i++) {
              let item = this.versionInfo[i];

              if (this.jumpLevel && this.jumpLevel < 4) {
                if (this.jumpLevel == item.versionLevel) {
                  this.current = i;
                  this.currentVipLevel = item.versionLevel;
                  break;
                }
              } else if (item.versionLevel == this.vipLevel) {
                this.current = i;
                this.currentVipLevel = item.versionLevel;
              }
            }

            this.setNavigationBar();
            this.loaded = true;
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    setNavigationBar() {
      uni.setNavigationBarColor({
        frontColor: "#ffffff",
        backgroundColor: "",
      });
    },
    change(e) {
      this.current = e.detail.current;
    },
    handleLevelClick(level) {
      if (!this.personId) {
        this.needToLogin();
        return;
      }
      this.choseType = level;
    },
    handleItemClick(item) {
      console.log(item);

      if (item.rightsSign == "report_lib") {
        uni.reLaunch({
          url: "/pages/companyReport/index",
        });
      } else if (item.rightsSign == "case_lib") {
        uni.reLaunch({
          url: "/pages/library/index",
        });
      } else if (item.rightsSign == "resume") {
        uni.reLaunch({
          url: "/pages/company/index",
        });
      } else if (item.rightsSign == "sub_account") {
        if (this.personInfo.accountType == 1) {
          uni.navigateTo({
            url: "/pagesSub/companyCenter/rights/subAccountManage",
            fail: (err) => {
              console.log("跳转失败了，原因:", err);
            },
          });
        } else if (this.personInfo.accountType == 2) {
          uni.showToast({ title: "子账号无法进入管理页", icon: "error" });
        }
      }
    },
    vipCard(versionLevel) {
      if (versionLevel == 2) {
        return this.$imgBaseSelf + "vip/buy-top-sm.png";
      } else if (versionLevel == 3) {
        return this.$imgBaseSelf + "vip/buy-top-md.png";
      } else if (versionLevel == 4) {
        return this.$imgBaseSelf + "vip/buy-top-high.png";
        // return this.$imgBaseSelf + "vip/buy-top-high-1.png";
      }
    },
    vipIcon(versionLevel) {
      if (versionLevel == 2) {
        return this.$imgBaseSelf + "vip/vip-small-icon.png";
      } else if (versionLevel == 3) {
        return this.$imgBaseSelf + "vip/vip-middle-icon.png";
      } else if (versionLevel == 4) {
        return this.$imgBaseSelf + "vip/vip-high-icon.png";
      }
    },
    // 开通vip
    handleBuyVip(level) {
      this.handleShowConsultant();
      return;

      if (!this.personId) {
        this.needToLogin();
        return;
      }
      if (this.paying) return;
      this.paying = true;
      let sign = "yltLevel" + level;
      const openId = uni.getStorageSync("openid");
      const params = {
        personId: this.personId,
        companyId: this.companyId || this.personId,
        rightsSign: sign,
        num: 1,
        openId,
      };
      if (this.provider.indexOf("wxpay") >= 0) {
        this.addWxPay(params);
      }
    },
    addWxPay(params) {
      uni.showLoading({
        title: "",
        mask: true,
      });
      addOrderAndPay(params)
        .then((res) => {
          if (res && res.code == 200) {
            this.requestPayment(res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .finally(() => {
          this.paying = false;
        });
    },
    // 会员再次购买
    handleBuyClick(item) {
      this.handleShowConsultant();
      return;

      if (this.personInfo.accountType == 2) {
        uni.showToast({ title: "子账号无法进行续费操作", icon: "fail" });
        return;
      }
      if (this.vipLevel == 1) {
        if (item.versionLevel == 1) {
          this.current = this.current + 1;
        } else {
          this.handleBuyVip(item.versionLevel);
        }
      } else if (this.vipLevel == 3 && item.versionLevel == 2) {
        uni.showToast({
          title: "您已是SVIP，无法购买VIP",
          icon: "none",
        });
      } else {
        this.handleBuyVip(item.versionLevel);
      }
    },

    // 支付API
    requestPayment(data) {
      data.payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: data.payData.timeStamp,
        nonceStr: data.payData.nonceStr,
        package: data.payData.package,
        signType: "MD5",
        paySign: data.payData.paySign,
        success: (res) => {
          this.handlePaySuccess(res);
        },
        fail: (err) => {
          this.handlePayFial(err);
        },
      });
    },
    handlePaySuccess(res) {
      uni.hideLoading();
      uni.showToast({
        title: "支付成功",
        icon: "none",
      });
      this.getData();
      setTimeout(() => {
        uni.redirectTo({ url: "/pagesSub/companyCenter/vip/index" });
      }, 300);
    },
    handlePayFial(err) {
      uni.hideLoading();
      let msg = "";
      if (err.errMsg == "requestPayment:fail cancel") {
        msg = "取消支付";
      } else {
        msg = err.errMsg;
      }
      uni.showToast({
        title: msg,
        icon: "none",
      });
    },
    needToLogin() {
      this.$refs.pageWrap.handleLogin();
    },
    handleShowConsultant() {
      this.showConsultant = true;
    },
    handleCall() {
      uni.makePhoneCall({
        phoneNumber: this.consultantPhone,
      });
    },
    getCustomerService() {
      getCustomerService().then(res => {
        if (res.code == 200) {
          this.consultantPhone = res.data.phone;
          this.consultantName = res.data.name;
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: 'none'
          });
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.vip {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-image: url($img-base + "ecenter/my-vip-sm.png");
  background-color: #000960;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
  .top {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 412rpx;
    // background: url($img-base + 'ecenter/vip-m-top-bg.png');
    // background-size: 100%;
    overflow: hidden;

    .top-img {
      position: absolute;
      width: 100%;
      height: 216rpx;
      bottom: 0;
      left: 0;
    }
  }

  .img-w {
    width: 100%;
  }

  .price {
    display: flex;
    margin: 32rpx 0 20rpx 0;
    padding: 0 32rpx;
    justify-content: space-around;
    .img-price {
      margin-left: 24rpx;
      &:nth-child(1) {
        margin: 0;
      }
    }
  }

  .scroll-view {
    // height: 1px;
    height: calc(100vh - 412rpx);
    flex-grow: 1;
    background-size: 100%;
    background-repeat: no-repeat;

    .box:last-child {
      padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    }
  }

  .buy {
    position: fixed;
    // bottom: calc(24rpx + constant(safe-area-inset-bottom));
    // bottom: calc(24rpx + env(safe-area-inset-bottom));

    bottom: 24rpx;
    @supports (
        (bottom: constant(safe-area-inset-bottom)) or
          (bottom: env(safe-area-inset-bottom))
      )
      and (-webkit-overflow-scrolling: touch) {
      bottom: constant(safe-area-inset-bottom);
      bottom: env(safe-area-inset-bottom);
    }
    width: 100%;
    // height: 162rpx;
    .container {
      background-size: 100% 100%;
      .noPayButtons {
        display: flex;
        justify-content: center;
        // align-items: center;
        padding: 0 32rpx;
        width: 100%;
        .img-code {
          width: 210rpx;
          margin-right: 18rpx;
        }
        .img-open {
          width: 458rpx;
        }
      }
      .protocolTips {
        margin-top: 14rpx;
        text-align: center;
        color: #b4dcff;
        span {
          color: #a9a49e;
        }
      }
    }

    .colorBlock {
      width: 100%;
      height: calc(constant(safe-area-inset-bottom));
      height: calc(env(safe-area-inset-bottom));
      background-color: #000960;
      // height: 68rpx;
      bottom: calc(24rpx + constant(safe-area-inset-bottom));
      bottom: calc(24rpx + env(safe-area-inset-bottom));
      width: 100%;

      // @supports (bottom: constant(safe-area-inset-bottom)) {
      //   bottom: constant(safe-area-inset-bottom);
      // }
      // @supports (bottom: env(safe-area-inset-bottom)) {
      //   bottom: env(safe-area-inset-bottom);
      // }
    }
  }

  &.vip-1 {
    .scroll-view {
      background-image: url($img-base + "vip/body-bg-1.png");
    }
  }

  &.vip-2 {
    .scroll-view {
      background-image: url($img-base + "vip/body-bg-2.png");
    }
  }

  &.vip-3 {
    .scroll-view {
      background-image: url($img-base + "vip/body-bg-3.png");
    }
  }

  &.vip-4 {
    .scroll-view {
      background-image: url($img-base + "vip/body-bg-4.png");
    }
  }

  .slot-content {
    // height: 300rpx;
    padding: 0 32rpx;
  }
}
view[hidden] {
  display: none !important;
}

// 详情页
.vip-detail {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #000960;
  background-size: 100%;

  .top {
    position: relative;
    height: 474rpx;
    // background-image: url($img-base + 'ecenter/vip-samll-top-bg.png');
    background-size: 100% 100%;

    .swiper {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 308rpx;

      .swiper-item {
        padding-top: 28rpx;
        // display: flex;
        // flex-direction: column;
        // justify-content: flex-end;
      }

      .card-wrap {
        position: relative;

        .icon-diamonds {
          position: absolute;
          bottom: 0rpx;
          right: -28rpx;
          width: 312rpx;
          height: 310rpx;
          pointer-events: none;
        }

        &.card-1 {
          .box {
            background-image: url($img-base + "vip/card-bg-sm.png");
          }

          .icon-current {
            background-image: url($img-base + "vip/curren-level-sm.png");
          }

          .icon-title {
            margin-bottom: 12rpx;
            width: 186rpx;
            height: 50rpx;
          }

          .icon-diamonds {
            background-image: url($img-base + "vip/diamonds-sm.png?v=1");
          }

          .icon-action {
            background-image: url($img-base + "vip/update-sm.png");
          }
        }

        &.card-2 {
          .box {
            background-image: url($img-base + "vip/card-bg-sm.png");
          }

          .icon-current {
            background-image: url($img-base + "vip/curren-level-sm.png");
          }

          .icon-diamonds {
            background-image: url($img-base + "vip/diamonds-sm.png?v=1");
          }

          .icon-action {
            background-image: url($img-base + "vip/update-2.png");
          }
        }

        &.card-3 {
          .box {
            background-image: url($img-base + "vip/card-bg-md.png");
          }

          .icon-current {
            background-image: url($img-base + "vip/curren-level-md.png");
          }

          .icon-diamonds {
            right: -14rpx;
            background-image: url($img-base + "vip/diamonds-md.png?v=1");
          }

          .icon-action {
            background-image: url($img-base + "vip/update-md.png");
          }

          .label {
            color: #835ace;
          }

          .user-name {
            color: #a315a9 !important;
          }
        }

        &.card-4 {
          .box {
            background-image: url($img-base + "vip/card-bg-high.png");
          }

          .icon-current {
            background-image: url($img-base + "vip/curren-level-high.png");
          }

          .icon-diamonds {
            bottom: 20rpx;
            right: -10rpx;
            background-image: url($img-base + "vip/diamonds-h.png");
          }

          .icon-action {
            background-image: url($img-base + "vip/update-high.png");
          }

          .label {
            color: #8c8c8b;
          }

          .user-name {
            color: #ffea9f !important;
          }
        }

        &.not-current {
          .icon-title {
            position: absolute;
            top: 52rpx;
            left: 30rpx;
          }

          &.card-2 {
            .icon-action {
              background-image: url($img-base + "vip/buy-sm.png");
            }
          }

          &.card-3 {
            .icon-action {
              background-image: url($img-base + "vip/buy-md.png");
            }
          }

          &.card-4 {
            .icon-action {
              background-image: url($img-base + "vip/buy-high.png");
            }
          }
        }
      }

      .box {
        position: relative;
        width: 604rpx;
        height: 278rpx;
        background-size: 100% 100%;

        .icon-current {
          margin: 4rpx 0 0 2rpx;
          width: 186rpx;
          height: 50rpx;
        }

        .icon-title {
          margin-bottom: 4rpx;
          width: 160rpx;
          height: 48rpx;
        }

        .icon-action {
          position: absolute;
          bottom: 28rpx;
          right: 40rpx;
          width: 164rpx;
          height: 60rpx;
        }

        .circle {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 338rpx;
          height: 274rpx;
          z-index: 1;
          pointer-events: none;
        }

        .user-info {
          display: flex;
          align-items: center;
          margin: 22rpx 0 32rpx 28rpx;
          height: 100rpx;

          .avatar-wrap {
            display: inline-block;
            flex-shrink: 0;
            width: 72rpx;
            height: 72rpx;
            margin-right: 14rpx;
            padding: 2rpx;
            background: linear-gradient(to bottom, #dbf1f5 100%, #caf0f9 100%);
            border-radius: 50%;
          }

          .avatar {
            width: 68rpx;
            height: 68rpx;
            border-radius: 50%;
          }

          .user-name {
            font-size: $uni-font-size-base;
            font-weight: bold;
            color: #ffffff;
          }
        }

        .label {
          position: absolute;
          bottom: 34rpx;
          left: 0;
          z-index: 2;
          margin-left: 36rpx;
          font-size: $uni-font-size-sm;
          color: #bdd4ff;
        }
      }
    }
  }

  .scroll-view {
    // height: 1px;
    height: calc(100vh - 474rpx);
    flex-grow: 1;
    background-size: 100%;
    background-repeat: no-repeat;

    .space {
      height: 86rpx;
    }

    .box:last-child {
      padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    }
  }

  .img-w {
    width: 100%;
  }

  .buy {
    position: fixed;
    left: 0;
    right: 0;
    // bottom: calc(-10rpx + constant(safe-area-inset-bottom)) ;
    // bottom: calc(-10rpx + env(safe-area-inset-bottom)) ;

    // bottom: calc(24rpx + constant(safe-area-inset-bottom));
    // bottom: calc(24rpx + env(safe-area-inset-bottom));

    bottom: 24rpx;
    @supports (
        (bottom: constant(safe-area-inset-bottom)) or
          (bottom: env(safe-area-inset-bottom))
      )
      and (-webkit-overflow-scrolling: touch) {
      bottom: constant(safe-area-inset-bottom);
      bottom: env(safe-area-inset-bottom);
    }
  }
}

.vip-1 {
  background-image: url($img-base + "vip/my-vip-sm.png");
  background-color: #000960;
}

.vip-2 {
  background-image: url($img-base + "vip/my-vip-sm.png");
  background-color: #000960;
}

.vip-3 {
  background-image: url($img-base + "vip/my-vip-md.png");
  background-color: #1f003a;
}

.vip-4 {
  background-image: url($img-base + "vip/my-vip-high.png");
  background-color: #0c0116;
}

::v-deep
  .page-wrap
  .content-wrap
  .u-form
  .u-form-item
  .u-form-item--left__content__label {
  margin-bottom: 0;
}

.slot-content {
  padding: 0 32rpx;
}

.consultant {
  padding: 36rpx;
  padding-bottom: 64rpx;
  background: linear-gradient(180deg, #FFEEE5 0%, #FFFFFF 41%);
  
  &-title {
    margin-bottom: 90rpx;
    padding-top: 20rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #222222;
  }

  &-name {
    margin-bottom: 70rpx;
    font-size: 44rpx;
    text-align: center;
    font-weight: bold;
    color: #222222;
  }

  .btn-call {
    width: 100%;
    height: 120rpx;
    background-image: url($img-base + 'vip/call.png');
    background-size: 100% 100%;
  }
}
</style>